<template>
	<!-- 分组每项item组件 -->
	<view class="section-item-layout" @tap="$emit('onClick')">
		<!-- 标题 -->
		<text class="section-item-title">{{title}}</text>
		<!-- 右边布局 -->
		<view class="section-item-right">
			<!-- 右边插槽 -->
			<slot name="right">
				<!-- 右边插槽默认内容 -->
				<view class="section-item-right-default">
					<text class="section-item-right-default-text">{{value}}</text>
					<image class="section-item-right-default-icon" src="/static/right_gray_icon.png" mode="aspectFit" v-if="isSelect"></image>
				</view>
			</slot>
		</view>
		<!-- 分割线 -->
		<view class="section-item-line"></view>
	</view>
</template>

<script setup>
	defineProps({
		//标题
		title:{
			type:String,
			default:''
		},
		//标题
		value:{
			type:String,
			default:''
		},
		//是否可点击
		isSelect:{
			type:Boolean,
			default:false
		}
	})
	defineEmits(['onClick'])
</script>

<style lang="scss" scoped>
	
.section-item-layout{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx 30rpx;
	background-color: #fff;
	position: relative;
	font-size: 28rpx;
	min-height: 100rpx;
	.section-item-title{
		color: $xh-title-color;
		flex-shrink: 0;
		margin-right: 30rpx;
	}
	.section-item-line{
		position: absolute;
		left: 30rpx;
		right: 0;
		bottom: 0;
		background-color: $xh-line-color;
		height: 1px;
		transform: scaleY(0.5);
	}
	.section-item-right-default{
		display: flex;
		align-items: center;
		.section-item-right-default-text{
			color: $xh-subtitle-color;
			text-align: right;
		}
		.section-item-right-default-icon{
			width: 24rpx;
			height: 24rpx;
			flex-shrink: 0;
			margin-left: 16rpx;
		}
	}
}
</style>